<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—团队活动</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../CSS/TeamActivities.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
        <!-- mask登录需要作为背景强调登陆框 -->
        <div class="mask"></div>
            <div class="logo">宠物收容所</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="AdoptionCenter.html">领养中心</a></li>
                <li><a href="PetKnowledge.html">宠物知识</a></li>
                <li  class="current"><a href="TeamActivities.html">团队活动</a></li>
                <li><a href="BeVolunteer.html">成为志愿者</a></li>
                <li><a href="Donate.html">捐助</a></li>
            </ul>
            <div  class="nav-login" v-show="user_id">
            <div class="Avater">
                <ul>
                <li><img :src="logginMessage.user_avater_url" alt=""></li>
                <li><div>{{this.logginMessage.userlogin_name}}</div></li>
                <li><div><a href="userCenter.html">用户中心</a></div></li>
                <li @click="outLogin">退出登录</li>
                </ul>
            </div>
            </div>
    
    
    
    
            <div class="nav-login" v-show="!user_id" @click="Loginhandle">
                <ul>
                    <li><a href="javascript:;">
                        <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                    </a></li>
                    <li><a href="javascript:;">登录/注册</a></li>
                </ul>
            </div>
    
            <div class="login-box">
            <div class="Login">
                <div class="owl" id="owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
            <form action="">
                <div>
                    <span class="iconfont icon-yonghu"></span>
                    <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
                </div>
                <div>
                    <span class="iconfont icon-ttubiao_password"></span>
                    <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
                </div>
                
                <!-- <button @click="loginButton">提交</button> -->
                <span @click="loginButton" style="color: #fff;
                background-color: #20b2aa;
                height: 50px;
                width: 150px;
                text-align: center;
                font-size: 1.2rem;
                line-height: 50px;
                border-radius: 3px;
                ">提交我</span>
            </form>
            <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
    
            <div class="Register"  style="display: none;">
    
                <div class="owl" id="reowl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
                <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
                <el-row>
                <el-col>
                    <el-form 
                    status-icon 
                    :inline="true" 
                    label-width="0px" 
                    :model="registerMessage" 
                    ref="registerMessage" 
                    class="demo-ruleForm" 
                    :rules="rules" 
                    
                    >
                        <div>
                            <span class="iconfont icon-email"></span>
                            <el-form-item label="" prop="user_email">
                            <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dianhua"></span>
                            <el-form-item label="" prop="user_phone">
                            <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <span class="iconfont icon-yonghu"></span>
                            <el-form-item label="" prop="user_name">
                                <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dizhi"></span>
                            <el-form-item label="" prop="user_address">
                                <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                            </el-form-item>
                        
                        </div>
                        <div>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password">
                            <el-input placeholder="密码" 
                            autocomplete="off" 
                            id="registerpass1" 
                            v-model="registerMessage.user_password" 
                            type="password" 
                            show-password
       
                            ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password_again">
                            <el-input placeholder="再次输入密码" 
                            autocomplete="off" 
                            id="registerpass" 
                            v-model="registerMessage.user_password_again" 
                            type="password" 
                            show-password
                            
                            
                            ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-input
                            style="
                            height: 10vh;
                            "
                            type="textarea"
                            placeholder="介绍一下自己吧"
                            v-model="registerMessage.user_info"
                            maxlength="60"
                            show-word-limit
                            style="font-size: 1.5rem;
                                height: 15vh;
                            "
                            >
                            </el-input>
                        </div>
                        <div style="color: #000;">
                            <template>
                            是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                            <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                            </template>
                        </div>
            <div style="color: #000;
            border: 1px #ccc solid;
            ">
            
            <el-upload
                class="upload-demo"
                drag
                action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                name="imgFile"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                multiple 
                
                >
                <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
                <i v-else class="el-icon-upload"
                style="
                    font-size: 67px;
                    color: #C0C4CC;
                    margin: 16px 0 16px;
                    line-height: 50px;
                "
                >
                <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </i>
                
            </el-upload>
            </div>
            
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerMessage')"
                        style="width: 15vw;"
                    >提交</el-button>
                    <el-button @click="resetForm('registerMessage')"
                        style="width: 15vw;"
                    >重置</el-button>
                </el-form-item>
            </div>
    
                    </el-form>
                </el-col>
                </el-row>
                <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
            </div>
             <div class="burger">
                 <div class="top-line"></div>
                 <div class="middle-line"></div>
                 <div class="bottom-line"></div>
             </div>
    </nav>
    <!-- 网页内容 -->

        
    <!----------团队介绍------------>
   
       
    <!----------团队介绍------------>
    <section id="about" class="about">
        <div class="container">
          <div class="section-title animate__animated animate__zoomInDown">
            <h2>ABOUT US</h2>
            <p>关于我们</p>
          </div>
  
          <div class="row">
            <div class="col-lg-6 order-1 order-lg-2 
            animate__animated animate__fadeInRight animate__delay-1s" >
              <img src="../images/aid station5.jpg" class="img-fluid" alt="">
            </div>
            <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content 
            animate__animated animate__fadeIn animate__delay-1s">
              <h3>由民间自主力量创立，<br>是一个无盈利性质的民间爱心团队</h3>
              <p class="fst-italic">
                用领养代替购买，用爱减少流浪
              </p>
              <ul>
                <li>个人团队</li>
                <li>集点滴之力为小生命寻得归所</li>
                <li>期待更多人的加入</li>
              </ul>
              <p>
                主创人员全部来自华南农业大学。对于人类来说，猫猫狗狗或许是重要的家庭成员，是一个精神寄托，
                亦或者仅仅是赶课路上的小小惊喜。但对于这些小小的生命来说，人类会是他们的救赎与唯一。
                抱着这样的理念，我们成立了这样的一个公益组织。
              </p>
            </div>
          </div>
  
        </div>
      </section>
      
      
    <!-------------------计数动画------------------------>
      <section id="counts" class="counts">
        <div class="container">
  
          <div class="row no-gutters">
            <div class="image col-xl-5 d-flex align-items-stretch justify-content-center justify-content-lg-start">
            </div>
                <div class="col-xl-7 ps-0 ps-lg-5 pe-lg-1 d-flex align-items-stretch">
                <div class="content d-flex flex-column justify-content-center">
                <h3>这一年：</h3>
                <p>
                  我们收获了:
                </p>
                <div class="row">
                    <div class="col-md-6 d-md-flex align-items-md-stretch">
                        <div class="count-box">
                            <span data-purecounter-start="0" data-purecounter-end="78" data-purecounter-duration="3" class="purecounter"></span>
                            <p>只流浪猫狗得到 <strong>救助</strong></p>
                        </div>
                    </div>
                    <div class="col-md-6 d-md-flex align-items-md-stretch">
                    <div class="count-box">
                      <span data-purecounter-start="0" data-purecounter-end="30" data-purecounter-duration="2" class="purecounter"></span>
                      <p>个可爱生灵被<strong>收养</strong></p>
                    </div>
                    </div>
  
                    <div class="col-md-6 d-md-flex align-items-md-stretch">
                    <div class="count-box">
                      <span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
                      <p>位家人<strong>加入</strong>了我们 </p>
                    </div>
                    </div>
                    <div class="col-md-6 d-md-flex align-items-md-stretch">
                    <div class="count-box">
                      <span data-purecounter-start="0" data-purecounter-end="27" data-purecounter-duration="4" class="purecounter"></span>
                      <p>份不同小伙伴的<strong>帮助</strong></p>
                    </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
        </div>
      </section>

      <!--------------------carousel----------------------------------->
      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators align-items-center">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
        <div class="carousel-inner center-block">
          <div class="carousel-item active">
            <img src="../images/homeless4.jpg" class="rounded mx-auto d-block">
            <div class="carousel-caption d-none d-md-block">
              <h5>流浪街头的狗狗</h5>
            </div>
          </div>
          <div class="carousel-item">
            <img src="../images/homeless2.jpg" class="rounded mx-auto d-block">
            <div class="carousel-caption d-none d-md-block">
              <h5>流浪街头的猫猫</h5>
            </div>
          </div>
          <div class="carousel-item">
            <img src="../images/homeless3.jpg" class="rounded mx-auto d-block" >
            <div class="carousel-caption d-none d-md-block">
              <h5>流浪街头的狗狗</h5>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span>Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span>Next</span>
        </button>
      </div>


        <!--------------------------timeline----------------------->
        <div class="container">
            <div class="page-header text-center">
                <h1 id="timeline">时间轴</h1>
            </div>
            <ul class="timeline">
                <li  class="timeline-inverted">
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>to future</h3>
                            <p>希望可以和更多人走在公益路上</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>2022.11.15</h3>
                            <p>课设结题啦</p>
                        </div>
                    </div>
                </li>
        
                <li  class="timeline-inverted">
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>2022.6.18</h3>
                            <p>收养了50只猫猫狗狗</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>2022.4.17</h3>
                            <p>我们的团队迎来了第8位伙伴</p>
                        </div>
        
                    </div>
                </li>
        
                <li  class="timeline-inverted">
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>2022.1.1</h3>
                            <p>与广州市的几所宠物收养所达成合作</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="timeline-badge primary"><a class="timeline-icon"><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div>
                    <div class="timeline-panel">
                        <div class="timeline-body">
                            <h3>2021.11.1</h3>
                            <p>项目成立</p>
                        </div>
                    </div>
                </li>
        
                <li class="clearfix" style="float: none;"></li>
            </ul>
        </div>

    <!-- 网页内容设计结束 -->
  

    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="../JS/OutJs/TeamActivities/purecounter.js"></script>




<script src="../JS/TeamActivities.js"></script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 